<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="joda" uri="http://www.joda.org/joda/time/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Setting - Rode Code</title>
<link rel="stylesheet" href="<c:url value="/css/tableStyle.css"/>" />
<style>
	*{
		transition: all 220ms ease;
	}
	#article{
		position: absolute;
		left:50%;
		top:20px;
		margin-left: -625px;
	}
	
	#insertTr{
		display:none;
		table-layout: fixed;
		oveflow:hidden;
	}

</style>
<script>
	window.onload = function(){
		document.getElementById("openInsert").onclick = openInsert;
		document.getElementById("insertReset").onclick = insertReset;
	}
	
	function openInsert(){
		document.getElementById("insertTr").style.display = "table-row";
		//document.getElementById("insertTr").style.height = "auto";

	}
	function insertReset(){
		document.getElementById("insertTr").style.display = "none";
		//document.getElementById("insertTr").style.height = "0px";
		
	}

</script>
</head>

<body>
  <h1>Road Code List</h1>
  
<s:form namespace="/setting" method="post" >
<table style="width:1100px;">
	<tr>
		<td><input class="button1" type="button" id="openInsert" value="新增"/></td>
		<td style="text-align: right">
		<input type="radio" name="search" value="ADDR_CODE">ADDR_CODE
		<input type="radio" name="search" value="ROAD_CODE">ROAD_CODE
		<input type="radio" name="search" value="NAME">NAME
		<input type="text" id="searchbox" size="10" name="searchBox" value="${searchBox}"/>
		<input type="submit" class="button" value="搜尋"  /></td>
	</tr>
</table>
</s:form>
	
	<table style="width:1100px;">
		<thead>
			<tr>
				<th>FUNCTION</th>
				<th>ID</th>
				<th>ADD_CODE</th>
				<th>ROAD_CODE</th>
				<th>NAME</th>
				<th>Creator</th>
				<th>CreateTime</th>
				<th>Modifier</th>
				<th>ModifiedTime</th>
			</tr>
		<s:form name="roadInsert" namespace="/setting" method="post">
				<tr id="insertTr">
		<td><input type="submit" class="button1" value="送出"  
		           onclick='document.getElementById("idInsert").value="insert"'/>
			<input class="button1" type="reset" id="insertReset" value="取消" /></td>
		<td><input readonly="readonly" size="10" name="model.id" value="${item.id}"></td>
		<td><input size="10" name="model.addrCode" value="${item.addrCode}"></td>
	    <td><input size="10" name="model.roadCode" value="${item.roadCode}"></td>
		<td><input size="20" name="model.roadName" value="${item.roadName}"></td>
		<td><input disabled="disabled" type="text" size="10" name="model.creator" value=""/></td>
		<td><input disabled="disabled" type="text" size="20" name="model.createTime" value=""/></td>
		<td><input disabled="disabled" type="text" size="10" name="model.modifier" value=""/></td>
		<td><input disabled="disabled" type="text" size="20" name="model.modifiedTime" value=""/></td>
		</tr>
		<input type="hidden" id="idInsert" name="action">
		</s:form>
	
		</thead>
		<tbody>
			<c:forEach items="${models}" var="item" varStatus="status">
				<s:form name="roadUpdate" namespace="/setting" method="post">
					<tr>
						<td><input class="button" type="submit" name="action" value="修改" 
						           onclick='document.getElementById("idUpdate").value="update"'>
							<input class="button" type="submit" name="action" value="刪除" 
							       onclick='document.getElementById("idUpdate").value="delete"'>
							       </td>
						<td><input readonly="readonly" size="10" name="model.id" value="${item.id}"></td>
						<td><input size="10" name="model.addrCode"
							value="${item.addrCode}"></td>
						<td><input size="10" name="model.roadCode"
							value="${item.roadCode}"></td>
						<td><input size="20" name="model.roadName"
							value="${item.roadName}"></td>
						<td><input readonly="readonly" type="text" size="10"
							name="model.creator" value="${item.creator}" /></td>
						<joda:format var="createTimeJoda" value="${item.createTime}"
							pattern="yyyy-MM-dd HH:mm:ss" />
						<td><input readonly="readonly" type="text" size="20"
							name="model.createTime" value="${createTimeJoda}" /></td>
						<td><input readonly="readonly" type="text" size="10"
							name="model.modifier" value="${item.modifier}" /></td>
						<joda:format var="createTimeJoda" value="${item.modifiedTime}"
							pattern="yyyy-MM-dd HH:mm:ss" />
						<td><input readonly="readonly" type="text" size="20"
							name="model.modifiedTime" value="${createTimeJoda}" /></td>
					</tr>
					
				</s:form>
			</c:forEach>
		</tbody>
	</table>
</body>
</html>